<template>
  <div class="screen-item">
    <h3>{{ props.data.name }}</h3>
    <div class="thumbnail">缩略图</div>
    <div class="screen-meta">
      <span>{{ props.data.date }}</span>
      <el-button size="small" @click="editScreen()">编辑</el-button>
      <el-button size="small" type="danger" @click="deleteScreen()"
        >删除</el-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";

const props = defineProps({
  data: Object,
});

// 编辑方法
const editScreen = () => {
  console.log(`编辑第 ${props.data} 个大屏`);
};

// 删除方法
const deleteScreen = () => {
  console.log(`删除第 ${props.data} 个大屏`);
};
</script>
<style scoped>
@import "../styles/style.css";
</style>
